<!--审查要点的编辑页面-->
<template>
  <div class="marker-box">
    <div class="marker-main">
      <ai-marker
        ref="aiMarker"
        :readOnly="readOnly"
        v-bind:imgUrl="cloneBaseImgUrl"
        :ratio="4 / 3"
        @vmarker:onAnnoAdded="onAnnoAdded"
        @vmarker:onReady="onReady"
      ></ai-marker>
    </div>

    <div class="marker-bar" ref="markerBar">
      <el-scrollbar>
        <div :style="{ maxHeight: markerBarHeight + 'px' }">
          <el-form
            :label-position="'top'"
            ref="mainPointForm"
            :model="mainPointObj"
          >
            <el-form-item
              v-for="(point, index) in pointArray"
              :key="index"
              prop="pointText"
              :rules="{
                validator: (rule, value, callback) => {
                  validatePointText(rule, value, callback, point);
                },
                trigger: 'change',
              }"
            >
              <div class="item">
                <div>
                  审查要点【<span class="require">{{ point.index }}</span
                  >】
                </div>
                <div>
                  <i
                    v-if="!readOnly"
                    class="el-icon-delete require"
                    style="font-size: 14px; cursor: pointer; padding: 5px"
                    @click="del(point.index)"
                  ></i>
                </div>
              </div>

              <div v-if="!readOnly">
                <el-input
                  type="textarea"
                  resize="none"
                  v-model="point.pointText"
                  :rows="3"
                  :maxlength="500"
                  show-word-limit
                ></el-input>
              </div>
              <div
                style="
                  background-color: #fff;
                  line-height: 25px;
                  padding: 10px 5px;
                  border-radius: 5px;
                  margin-top: 5px;
                  word-break: break-word;
                "
                v-if="readOnly"
              >
                {{ point.pointText }}
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
// import { AIMarker } from "vue-picture-bd-marker";
import { UUID } from "./mainPoint.js";
export default {
  props: {
    //初始化渲染的point数据
    pointDataArray: {
      type: Array,
      default: () => {
        return [];
      },
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    baseImgUrl: {
      type: String,
      default: "",
    },
  },
  components: {
    "ai-marker": AIMarker,
  },

  data() {
    return {
      markerBarHeight: 0,
      //最终要的数据
      pointArray: [],
      mainPointObj: {},
      temp: true,
      cloneBaseImgUrl: this.baseImgUrl,
    };
  },

  mounted() {
    this.markerBarHeight = this.$refs.markerBar.offsetHeight - 16;
  },
  methods: {
    onReady() {
      this.initPointData();
    },
    initPointData() {
      const that = this;
      this.temp = false;
      let marker = that.$refs.aiMarker.getMarker();
      this.pointDataArray.forEach((point) => {
        let data = that.point2Data(point);
        that.pointArray.push(data);
      });
      marker.renderData(this.pointArray);
      this.temp = true;
    },

    point2Data(point) {
      let uuidString = UUID(16, "");
      let data = {
        tag: `temp@${uuidString}`,
        uuid: uuidString,
      };
      data.index = point.examineNumber;
      data.pointText = point.pointText;
      data.position = {
        x: point.x,
        x1: point.x1,
        y: point.y,
        y1: point.y1,
      };
      data.tagName = point.examineNumber;
      return data;
    },

    //校验审查要点是否填写了
    validatePointText(rule, value, callback, point) {
      if (!point || !point.pointText) {
        callback("请填写审查要点内容");
      }
      callback();
    },
    onAnnoAdded(data) {
      if (!this.temp) {
        return;
      }
      let marker = this.$refs.aiMarker.getMarker();
      if (marker) {
        let markerData = marker.getData();
        data.index = markerData.length;
        data.tagName = markerData.length;
        data.pointText = "";
        marker.setTag(data);
        this.pointArray.push(data);
      }
    },
    //点击删除审查要点
    del(index) {
      let marker = this.$refs.aiMarker.getMarker();
      if (index) {
        let target = this.pointArray.findIndex((item) => {
          return item.index == index;
        });

        let targetObj = this.pointArray[target];
        this.pointArray.splice(target, 1);
        this.pointArray.forEach((item) => {
          if (item.index > targetObj.index) {
            item.index -= 1;
            item.tagName = item.index;
          }
        });
        //重组index值
        marker.clearData();
        this.temp = false;
        marker.renderData(this.pointArray);
        this.temp = true;
      }
    },

    //校验必填项，并返回需要的数据
    mainPointInvoke() {
      //首先校验
      const that = this;

      return new Promise((resolve, reject) => {
        that.$refs.mainPointForm.validate((valid) => {
          if (!valid) {
            resolve({ code: false, data: [] });
            return false;
          }
          //组装返回的审查要点数据
          let finalArray = [];
          that.pointArray.forEach((point) => {
            let pointObj = {};

            //审查要点编号
            pointObj.examineNumber = point.index;
            //审查要点说明信息
            pointObj.pointText = point.pointText;
            //位置信息
            Object.assign(pointObj, point.position);
            finalArray.push(pointObj);
          });

          resolve({ code: true, data: finalArray });
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.marker-box {
  width: 100%;
  display: flex;
  flex-direction: row;

  .marker-main {
    width: 72%;
  }
  .marker-bar {
    background-color: #f8f8f9;
    padding: 8px;
    width: 28%;
    .require {
      color: #f56c6c;
      font-size: 16px;
      font-weight: 600;
      margin: 0;
    }
    .item {
      line-height: 25px;
      display: flex;
      div:first-child {
        width: 70%;
      }
      div:last-child {
        width: 30%;
        text-align: right;
      }
    }
  }
}

/deep/ .annotation {
  border-radius: 3px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/ .bottom-left {
  left: 0;
}
/deep/ .top-right {
  top: 0;
}
/deep/ .top-left {
  top: 0;
  left: 0;
}
/deep/ .g-image-op {
  cursor: auto;
  bottom: auto;
  position: absolute;
}

/deep/ .g-image-op-content {
  box-sizing: border-box;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.8);
  background: none;
  height: auto;
  line-height: unset;
  padding: 0;
  font-size: 21px;
  font-weight: 550;
}
/deep/ .g-image-op-del {
  display: none !important;
}
</style>
